<template>
  <div>
    <customDialog
      :title="`${title}剧集`"
      :dialogVisible="dialogVisible"
      @close="closeDialog(ruleFormRef)"
      @confirm="confirmDialog(ruleFormRef)"
      width="50%"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-position="left"
          label-width="120px"
          class="form_box"
        >
          <!-- <el-row>
            <el-col :span="14">
              <el-form-item label="剧集图片:" prop="chargeEpisodeNo">
                <el-input v-model="formData.chargeEpisodeNo" placeholder="请输入付费卡点" clearable />
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="14">
              <el-form-item label="剧集名称:" prop="unblockCoinAmount">
                <el-input
                  v-model="formData.unblockCoinAmount"
                  placeholder="请输入剧集名称"
                  maxlength="20"
                  show-word-limit
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="开投时间:" prop="unblockCoinAmount">
                <el-date-picker
                  v-model="formData.unblockCoinAmount"
                  type="datetime"
                  placeholder="请选择时间"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="已发布数:" prop="unblockCoinAmount">
                <el-input
                  v-model.number="formData.unblockCoinAmount"
                  placeholder="请输入已发布数"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="总集数:" prop="unblockCoinAmount">
                <el-input
                  v-model.number="formData.unblockCoinAmount"
                  placeholder="请输入剧集总集数"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="排序:" prop="unblockCoinAmount">
                <el-input
                  v-model.number="formData.unblockCoinAmount"
                  placeholder="请输入排序"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="小程序展示:" prop="unblockCoinAmount">
                <el-switch v-model="formData.unblockCoinAmount" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="标签:">
                <el-input
                  v-model="formData.unblockCoinAmount"
                  placeholder="请输入标签"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="18">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model="formData.unblockCoinAmount"
                  placeholder="请输入备注"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import defaultTemplate from "@/components/DefaultRechargeTemlate/defaultTemlate.vue";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import type { FormInstance } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const form = {
  libraryId: "",
  chargeEpisodeNo: "",
  unblockCoinAmount: "",
  movieId: "",
};
const formData = ref(Object.assign({}, form));

const title = ref<string>("");

const relationData = ref([]);

// 剧集
const optionEpisode = ref([
  { label: "001-女神的复仇", value: 1 },
  { label: "002-女神的复仇", value: 2 },
]);

const rules = reactive({
  chargeEpisodeNo: [
    { required: true, message: "请填写付费卡点", trigger: "blur" },
  ],
  unblockCoinAmount: [
    { required: true, message: "请输入每集价格", trigger: "change" },
  ],
});

const defaultTemplateRef = ref();

// 关闭
const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl?.resetFields();
  dialogVisible.value = false;
};

// 成功
const emit = defineEmits(["success"]);
const confirmDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      dialogVisible.value = false;
      console.log("submit!");
      emit("success");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// 父级电子显示dialog
const showDialog = (val: any) => {
  console.log(111, val);
  dialogVisible.value = true;
  title.value = val ? "编辑" : "新增";
  if (val) relationData.value = val.relationData;
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.form_box {
  padding: 0 20px;
}
</style>
